<template>
  <div>
    <div class="chart" id="myChartsTwo">
      <span>图表加载中...</span>
    </div>
  </div>
</template>
  
  <script>
import { inject, onMounted, reactive } from "vue";
export default {
  setup() {
    let $echarts = inject("echarts");
    let $http = inject("axios");
    let data = reactive({});

    async function getState() {
      data = await $http({ url: "/two/data" });
    }

    onMounted(() => {
      getState().then(() => {
        let myChart = $echarts.init(document.getElementById("myChartsTwo"));
        myChart.setOption({
          title: {
            text: "",
            textStyle: {
              fontSize: 20,
              color: "#fff"
            }
          },

          grid: {
            left: "1%",
            right: "1%",
            bottom: "1%",
            containLabel: true
          },
          legend: {
            textStyle: {
              color: "#fff"
            }
          },
          textStyle: {
            color: "#fff",
            fontSize: 15
          },
          dataset: {
            source: [
              ["product", "总货量（亿吨公里）", "总重量（万吨）"],
              ["2020", 130.3, 75.8],
              ["2021", 130.1, 63.4],
              ["2022", 160.4, 65.2]
            ]
          },
          xAxis: {
            type: "category",
            splitLine: { show: false },
            splitArea: { show: false },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            show: false,
            splitLine: { show: false },
            splitArea: { show: false },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              type: "bar",
              barWidth: 15,
              label: {
                show: true,
                position: "top",
                color: "#fff"
              }
            },
            {
              type: "bar",
              barWidth: 15,
              label: {
                show: true,
                position: "top",
                color: "#fff"
              }
            }
          ]
        });
      });
    });

    return {
      getState,
      data
    };
  }
};
</script>
  
  <style>
.chart {
  height: 210px;
}
</style>